<template>
    <div class="back">
        <el-container>
            <el-header height="10%">
                <div class="header-div">
                    <img class="img-title" src="@/assets/img/index/title.png"/>
                    <div class="header-font">桐庐县江南镇人民政府</div>
                </div>
                <div style="width:400px;margin-top:15px;margin-right:18px">
                    <el-input v-model="search" placeholder="搜索" style="width: 380px; position: relative; padding-right: 15px;" size="small" @keyup.enter.native="doSearch">  
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="doSearch" style="position: absolute; right: 15px;"></i>  
                    </el-input>
                </div>
                <div class="user">
                    <span class="username">{{username}}</span>
                    <span><el-avatar :size="40" :src="avatar"></el-avatar></span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="10%">
                    <div class="left-region">
                        <div class="goback" @click="back">
                            <img class="img-back" src="@/assets/img/back.png"/>
                            <span>返回</span>
                        </div>
                        <el-row class="tac">
                            <el-col>
                                <el-menu
                                default-active="/postDraft"
                                class="el-menu-vertical-demo"
                                background-color="rgb(60, 136, 172)"
                                text-color="rgb(255, 255, 255)"
                                active-text-color="#ffffff"
                                :unique-opened="true"
                                @select="menuClick"
                                @open="handleOpen"
                                @close="handleClose">
                                    <el-submenu index="1">
                                        <template slot="title">
                                            <img class="img-back" src="@/assets/img/post.png"/>
                                            <span>发文管理</span>
                                        </template>
                                        <el-menu-item index="/postDraft">发文拟稿</el-menu-item>
                                        <el-menu-item index="/postSelect">发文查询</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="2">
                                        <template slot="title">
                                            <img class="img-back" src="@/assets/img/pull.png"/>
                                            <span>收文管理</span>
                                        </template>
                                        <el-menu-item index="/newDraft">新建收文</el-menu-item>
                                        <el-menu-item index="/pullSelect">收文查询</el-menu-item>
                                    </el-submenu>
                                </el-menu>
                            </el-col>
                        </el-row>
                    </div>
                </el-aside>
                <el-main>
                    <div class="right-region">
                        <!-- 右边内容展示区 -->
                        <router-view></router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: [true,false],
            username: '用户名',
            avatar: '',
            search: '',  //搜索内容
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //搜索框点击搜索
        doSearch() {
            console.log(this.search);
        },
        back() {
            this.$router.push("/");
        },
        // 菜单对应路径跳转
        menuClick(index) {
            this.$router.push(index);
        },
    },
    created() {
        this.$router.push("/postDraft");
    }
}
</script>

<style scoped>
    .el-header{
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
    }
    .el-aside{
        height: 30%;
        margin-left: 40px;
        padding: 5px 10px 5px 10px;
        background-color: rgb(60, 136, 172);
        border-radius: 8px;
        color: white;
        overflow: hidden;
    }
    .el-main{
        height: 95%;
        margin-right: 100px;
        margin-left: 20px;
        border-radius: 10px;
        background-color: white;
        overflow:hidden;
    }
    .back{
        background: url("../../assets/img/background.png");
        background-size: 100% 100%;
        display: flex;
        height: 100%;
        vertical-align:top;
    }
    .right-region{
        width: 100%;
        height: 100%;
    }
    .img-title{
        width: 190px;
        height: 190px;
        margin-top: -45px;
        margin-left: -50px;
    }
    .header-div{
        margin-top: -20px;
        vertical-align:middle;
        display: flex;
    }
    .header-font{
        font-size: 35px;
        margin-top: 30px;
        margin-left: -50px;
        color: white;
    }
    .user *{
        font-size: 15px;
        vertical-align:middle;
        margin-top: 10px;
    }
    .user{
        margin-right: 80px;
    }
    .nav{
        width: 90%;
        margin: 0 auto;
        text-align: center;
        cursor:pointer;
        margin-bottom: 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 8px;
    }
    .img-back{
        width: 20px;
        height: 20px;
    }
    .goback *{
        font-size: 15px;
        vertical-align:middle;
        cursor: pointer;
    }
    .goback{
        width: 90%;
        margin: 0 auto;
        margin-left: 20px;
        margin-bottom: 10px;
    }
    

</style>
<style>
    .back .el-submenu__title i {
        color: #ffffff;
    }
    .back .el-submenu .el-menu-item {
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        padding: 0 45px;
        width: 150px;
        text-align: center;
        border-radius: 8px;
        min-width: 100px;
    }
    /* 一级菜单选中的样式 */
    .back .el-menu-item.is-active{
        background-color:rgb(245, 170, 32) !important;
        border-radius: 8px;
        border-bottom-color: transparent !important;
    }
    .el-menu {
    /* border-right: solid 1px #e6e6e6; */
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #FFF;
    }
</style>